<!-- 邀请人员 -->
<template>
    <page-header-wrapper class="detail" @back="() => $router.go(-1)">
        <a-card style="margin-top: 24px" :bordered="false" title="请将以下字段与上传表单中的字段相匹配">
            <div class='table-page-search-wrapper'>
                <a-form layout='inline'>
                    <a-row :gutter='48'>
                        <a-col :md='6' :sm='24'>
                            <a-form-item label="姓名">
                                <a-select v-model="name" placeholder="请选择" allow-clear >
                                    <a-select-option v-for="item in fileData.headers" :key="item" :value="item">{{item}}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md='6' :sm='24'>
                            <a-form-item label="身份证号">
                                <a-select v-model="idcard" placeholder="请选择" allow-clear>
                                    <a-select-option v-for="item in fileData.headers" :key="item" :value="item">{{item}}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md='6' :sm='24'>
                            <a-form-item label="银行卡号">
                                <a-select v-model="bankAccount" placeholder="请选择" allow-clear>
                                    <a-select-option v-for="item in fileData.headers" :key="item" :value="item">{{item}}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md='6' :sm='24'>
                            <a-form-item label="结算金额">
                                <a-select v-model="amount" placeholder="请选择" allow-clear>
                                    <a-select-option v-for="item in fileData.headers" :key="item" :value="item">{{item}}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <!-- <a-col :md='8' :sm='24'>
                            <a-form-item label="开户行">
                                <a-select v-model="channel" placeholder="请选择" allow-clear>
                                    <a-select-option v-for="item in fileData.headers" :key="item" :value="item">{{item}}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md='8' :sm='24'>
                            <a-form-item label="开户地">
                                <a-select v-model="channelCity" placeholder="请选择" allow-clear>
                                    <a-select-option v-for="item in fileData.headers" :key="item" :value="item">{{item}}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col> -->
                    </a-row>
                </a-form>
            </div>
            <a-table rowKey="id" :columns="columns" :data-source="dataList"  size="small">
                <template slot="footer">
                    <div style="color: #999">备注：为了防止误传操作，示例展示的为上传表单的前7行数据，帮助您确认上传文件</div>
                </template>
            </a-table>
            <div><span style="color: red">温馨提示：</span>民工清单系统仅做存档，不做结算</div>
            
            <div class="flex flexCenter" >
                <a-button style="margin-right: 20px" @click="() => $router.go(-1)">取消</a-button>
                <a-button type="primary" style="margin-left: 20px" @click="confirmUpload">确认上传</a-button>
            </div>
        </a-card>
    </page-header-wrapper>
</template>

<script>
import { configmSettlementExcel , projectUserUploadContinue , contineuSettlementExcel } from '@/api/services/settlement';
export default {
    data () {
        return {
            fileData: {
                batchNumber: '', // 上传批次号
            },
            projectId: '',
            columns: [],
            dataList: [],
            name: undefined,
            idcard: undefined,
            amount: undefined,
            bankAccount: undefined,
            channel: undefined,
            channelCity: undefined,
        };
    },
    created(){
        this.fileData = JSON.parse(this.$route.query.fileData);
        this.settlementId = this.$route.query.settlementId;
        this.getTableColumns();
    },
    methods: {
        getTableColumns(){
            var length = this.fileData.data.length > 7 ? 7 : this.fileData.data.length;
            var list = [];
            var column = [];
            for(let j = 0; j < this.fileData.headers.length; j++){
                column.push({
                    'title': this.fileData.headers[j],
                    'dataIndex': this.fileData.headers[j],
                    'key': this.fileData.headers[j],
                    'align': 'center',
                })
            }
            this.columns = column;
            for(let i = 0; i < length; i++){
                this.fileData.data[i]['id'] = i;
                list.push(this.fileData.data[i]);
            }
            console.log(list);
            this.dataList = list;
        },
        // 确认邀请
        confirmUpload(){
            let _this = this;
            console.log(_this.name,'name')
            if(!_this.name){
                _this.$message.warning('请选择姓名对应的表头');
                return;
            }
            if(!_this.idcard){
                _this.$message.warning('请选择身份证号对应的表头');
                return;
            }
            if(!_this.amount){
                _this.$message.warning('请选择结算金额对应的表头');
                return;
            }
            if(!_this.bankAccount){
                _this.$message.warning('请选择收款账号对应的表头');
                return;
            }
            // if(!_this.channel){
            //     _this.$message.warning('请选择开户行对应的表头');
            //     return;
            // }
            const params = {
                'batchNumber': _this.fileData.batchNumber,
                'headerMap': {
                    '姓名': _this.name,
                    '身份证号': _this.idcard,
                    '结算金额': _this.amount,
                    '收款账号': _this.bankAccount,
                    // '开户行': _this.channel,
                    // '开户地': _this.channelCity,
                },
                'settlementId': _this.settlementId,
            }
            configmSettlementExcel(params)
            .then(res => {
                if(res.success){
                    if(res.data.errorCol == 0){
                        // 没有错误
                        // _this.continueUpload();
                        _this.$notification['success']({
                            message: '温馨提示',
                            description: '上传成功',
                            duration: 8
                        })
                        _this.$router.go(-1)
                    } else if(res.data.errorCol == -1){
                        // 全部错误
                        _this.$confirm({
                            title: '温馨提示',
                            content: '表单中所有数据存在错误，请下载表单修改后重新上传',
                            okText: '重新上传',
                            cancelText: '下载错误数据表单',
                            onOk(){
                                _this.$router.go(-1)
                            },
                            onCancel(){
                                window.open(res.data.errorExcelUrl);
                            },
                        })
                    } else{
                        _this.$confirm({
                            title: '温馨提示',
                            content: `当前 ${res.data.errorCol} 行数据存在错误，选择”继续上传“系统将提出错误数据`,
                            okText: '继续上传',
                            cancelText: '下载错误数据表单',
                            onOk(){
                                _this.continueUpload();
                            },
                            onCancel(){
                                window.open(res.data.errorExcelUrl);
                            },
                        })
                    }
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
        // 继续上传
        continueUpload(){
            let _this = this
            const params = {
                'batchNumber': _this.fileData.batchNumber,
            }
            contineuSettlementExcel(params)
            .then(res => {
                if(res.success){
                    _this.$notification['success']({
                        message: '温馨提示',
                        description: '上传成功',
                        duration: 8
                    })
                    _this.$router.go(-1)
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
    }
}

</script>
<style scoped>

</style>